<!DOCTYPE html>
<html>
<head>
    <title>仿腾讯微博效果</title>
    <meta charset="utf-8"> 
    <style type="text/css">
        #div{
            width: 510px;
            height: 700px;
            border: black solid 3px;
            background-color: white;
            margin:  100px 100px 100px 100px;
        }
        #div1{
            width: 510px;
            height: 210px;
            background-color: ;
            position: absolute;
            background-color: white;
        }
        #p1{
            font-size: 20px;
            margin-left:27px;
            background-color: white;
        }
        #text{
            height: 10px;
            margin-left:27px;
            padding-top: 15px;
            border-radius:10%;
            background-color: white;
        }
       img{
            width: 33px;
            height: 33px；
        }
        #span2{
           margin-left: 10px;
           line-height: 30px;
           background-color: white;
        }
        #wenben{
            width: 445px;
            height: 60px;
            margin-left:27px;
            margin-top:10px;
            border-radius: 3%;
            background-color: white;
        }
        #p2{
            margin-left:260px;
            margin-top:5px;
            background-color: white;
        }
        #button{
            width: 70px;
            height: 30px;
            position: absolute;
            margin-left: 18px;
            border-radius: 15%;
            font-size: 20px;
            color: white;
            background-color: mediumpurple; 
        }
        #div2{
           width: 480px;
           height: 450px;
           border: ghostwhite solid 1px;

           margin-left: 14px;
           position: absolute;
           top:350px;
           background-color: white;
        }
        #div2-1{
           width: 478px;
           height: 30px;
           margin-top: 10px;
           border: white solid 1px;
           background-color: mediumpurple;
        }
        #button2{
            width: 90px;
            height: 25px;
            margin-top: 5px;
            margin-left: 7px;
            font-size: 15px;
            color:black;
            background-color: white; 
        }
        ul{
            
            height: 410px;
            overflow: scroll;
        }
        ul li{
       
                list-style:none;
                /*list-style列表样式none没有的*/
                border-bottom: #B0C4DE solid 1px;
                
                margin-bottom:3px;
                
                word-break: break-all;
                background-color: white;

        }
        ul li>#h1{
          color: mediumpurple;
        }
        ul li>#sj{
          color: #B0C4DE;
        }
        ul li:hover{
          background-color:#B0C4DE;
        }
        .spanshan{
          margin-left: 330px;
          opacity: 0;
          transition: all 0.5s;
        }
        ul li:hover span{
          opacity: 1;
        }
    </style>   
</head>
<body>
    <div id="div">
        <div id="div1">
        <p id="p1">来，说说你在做什么，想什么</p>
        <span id="span1">
             <input type="text" id="text" />
        </span>
        <span id="span2">
            <img src="../z.css/1.jpg" class="current"/>
            <img src="../z.css/2.jpg" />
            <img src="../z.css/3.jpg" />
            <img src="../z.css/4.jpg" />
            <img src="../z.css/5.jpg" />
            <img src="../z.css/6.jpg" />
            <img src="../z.css/8.jpg" />
            <img src="../z.css/9.jpg" />
        </span>
        <textarea id="wenben" rows="445" cols="60"></textarea>
        <p id="p2">
            还能输入
            <span id="span4">140</span>
            个数
            <span><button id="button">广播</button></span>
        </p>
        </div>

        <div id="div2">
            <div id="div2-1">
              <div id="button2">大家在说</div>
            </div>
         
          <ul id="u1">
            
          </ul>
      </div>
  </div>
  <script type="text/javascript">
    var txt1 = document.getElementById("text");
    var txt2 = document.getElementById("span4");
    var txt3 = document.getElementById("wenben");
    var cheng = txt3.value.length;
    txt2.onkeyup = function(){
      txt2.innerText = "还能输入" + (140 - cheng)+"个字";
      if (cheng >= 140) {
        txt2.innerText = "已经超过" + (cheng - 150)+ "个字";
        return;
      }
    }
    var imgq = document.getElementsByTagName("img");
    for (var i = 0; i < imgq.length; i++) {
      imgq[i].onmouseover = function(){
        this.className += "hover"
      }
      imgq[i].onmouseout = function(){
        this.className = this.className.replace(/\s?hover/, "")
      }
      imgq[i].onclick = function(){
        for (var i = 0; i < imgq.length; i++) 
          imgq[i].className = "";
          this.className = "current"
        
      }
    }

    var ull = document.getElementById("u1");
    var butt = document.getElementById("button");
    var txt1 = document.getElementById("text");
    var a = 0;
    butt.onclick = function(){
      if (txt1.value.trim() == "") {
        alert("名称不能为空");
        return;
      }else if (txt1.value.length > 8) {
        alert("名称不能超过八个字符");
        return;
      }else if (cheng>140) {
        alert("广播内容不可超过140字符");
        return;
      }
    
    var nameT = txt1.value;
    var txti = txt3.value;
    var shijian = new Date();
    var active1 = document.querySelector(".current");
    ull.innerHTML = "<li id='li"+ a + "'><div class='faceDiv'> " + "<img src='" + active1.src + "'>" + "</div><div class='right'><p class='say'>" + "<a href=''>" + nameT + "：" + "</a>" +  txti + "<span class='spanshan' onclick='shan(" + a + ")'>删除</span></p><p class='time'>" + shijian.toLocaleTimeString() + "</p></div></li>" + ull.innerHTML; 
    a++;
  }
  function shan(id){
    document.getElementById("li"+id).remove();
  }
  </script>
</body>
</html>